<template>
	<view class="sobig">
		<view class="bgd">
			<view class="bgdtitle">修改银行卡</view>
			<view class="bgdname">修改您的银行卡</view>
		</view>
		<view class="bg">
			<u--form class="tableform" labelPosition="left" :rules="rules" ref="form1">
				<view class="bgtitle">
					持卡人姓名
				</view>
				<view class="imputbottom">
					<u--input placeholder="请输入姓名" clearable v-model="name"></u--input>
				</view>
				<view class="bgtitle">
					持卡人手机号
				</view>
				<view class="imputbottom">
					<u--input placeholder="请输入手机号" clearable v-model="phone"></u--input>
				</view>
				<view class="bgtitle">
					持卡人身份证号
				</view>
				<view class="imputbottom">
					<u--input placeholder="请输入身份证号" clearable v-model="idcard"></u--input>
				</view>
				<!-- <u-form-item labelWidth='80' class="inputs"	label="姓名" prop="userInfo.userName"  borderBottom ref="item1">
						<image src="../../static/tabsIcon/card/name.png" style="width: 40upx;height: 40upx;" mode=""></image>
						
					</u-form-item> -->
				<view class="bgtitle">
					银行卡号
				</view>
				<view class="imputbottom">
					<u--input placeholder="请输入卡号" type="number" clearable v-model="card" border="bottom"></u--input>
				</view>

				<view class="bgtitle">
					开户银行
				</view>
				<view class="imputbottom" @click="() => showpop = true">
					<u--input v-model="bank" disabled disabledColor="#ffffff" placeholder="请选择银行" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					</u--input>
				</view>


			</u--form>

			<u-popup :show="showpop" mode="top" @close="() => showpop =false">
				<view style="height: 60vh;">
					<view class="searchtop">
						<u-search height='100' placeholder="请输入银行名称" bgColor="#f2f2f2" :clearabled="true"
							v-model="searchbankname" :show-action="true" actionText="搜索" :animation="true"
							@custom='search()' @change="search()"></u-search>
					</view>
					<scroll-view class="searchbottom" scroll-y="true">
						<view v-for="(item,index) in search(searchbankname)" class="searchbottomview"
							@click="selectbank(item)">
							<view class="searchbottomleft">
								<image :src="item.bankIconLink" style="width: 80upx;height: 80upx;"></image>
							</view>
							<view class="searchbottomright">
								{{item.bankName}}
							</view>
						</view>

					</scroll-view>
				</view>

			</u-popup>

		</view>

		<u-button class="btn" @click="addcard">确认修改</u-button>
	</view>

</template>

<script>
	import {
		updateBankCard,
		getbank,
		bankCarddetail
	} from '@/api/mine'
	export default {
		data() {
			return {
				showpop: false,
				showbank: false,
				id: "",
				name: "",
				bank: "",
				card: "",
				idcard: "",
				phone: "",
				bankid: "",
				searchbankname: '',
				tips: "获取验证码",
				count: "60",
				timer: null,
				newbank: [],
				columns: [
					[]
				],
				rules: {
					// 'userName': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// }
				},
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.selectbankcard();

			// this.getbank();
		},
		methods: {
			bankCarddetail() {
				bankCarddetail(this.id).then(res => {
					console.log(res)
					this.card = res.data.cardNumber;
					this.name = res.data.userName;
					this.bankid = res.data.bankIconId;
					this.idcard = res.data.idCard;
					this.phone = res.data.phone;
					this.newbank.forEach(item => {
						if (item.id == res.data.bankIconId) {
							this.bank = item.bankName;
						}
					})
				})
			},
			selectbankcard() {
				this.columns = [];
				this.newbank = [];
				getbank().then(res => {
					for (let sss in res.data) {
						this.columns.push(res.data[sss])
						this.newbank.push(res.data[sss])
					}
					this.bankCarddetail();
				})
			},
			getbank() {
				getbank().then(res => {
					let list = res.data;
					list.forEach((item, index) => {
						let inner = {};
						inner["label"] = item.bankName;
						inner["id"] = item.id;
						this.columns[0].push(inner);
					});
					// console.log(this.columns)
				})
			},
			search() {
				var newList = []
				this.newbank.forEach(item => {
					if (item.bankName.indexOf(this.searchbankname) != -1) {
						newList.push(item)
					}
				})
				return newList
			},
			close() {
				this.showbank = false
			},
			selectbank(item) {
				// console.log("00000000")
				this.bank = item.bankName;
				this.bankid = item.id;
				this.showpop = false;
			},
			confirm(e) {
				console.log('confirm', e);
				this.showbank = false
				this.bank = e.value[0].label;
				this.bankid = e.value[0].id;
			},
			cancel() {
				// console.log('cancel');
				this.showbank = false
			},
			addcard() {
				if (!this.name) {
					uni.showToast({
						title: '请输入持卡人姓名',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入持卡人手机号',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (!this.idcard) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (!this.bankid) {
					uni.showToast({
						title: '请选择开户行',
						icon: 'none',
						duration: 2000
					});
					return
				}
				// console.log(this.card,(/^([1-9]{1})(\d{14}|\d{18})$/).test(this.card))
				if (this.card.length < 14) {
					uni.showToast({
						title: '请输入正确银行卡号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// return
				let data = {
					id: this.id,
					userName: this.name,
					cardNumber: this.card,
					bankIconId: this.bankid,
					idCard: this.idcard,
					phone: this.phone,
					type: 1
				}
				updateBankCard(data).then(res => {
					if (res.success == 1) {
						uni.showToast({
							icon: 'none',
							title: '修改成功!'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	page {
		background: #f4f4f4;
	}

	.sobig {
		padding-bottom: 50upx;
	}

	.bg {
		height: 800upx;
		width: 95%;
		background-color: #FFFFFF;
		border-radius: 40upx;
		margin: -80upx auto 0 auto;

		.bgtitle {
			margin-left: 20upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			letter-spacing: 5upx;
			opacity: 1;
			margin: 30upx 0 0 0;
		}

		.imputbottom {
			border-bottom: 2upx solid #CCCCCC;
		}
	}

	.bgd {
		width: 100%;
		height: 400upx;
		background-color: #FC6758;
		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 1;

		.bgdtitle {
			// height: 60upx;
			margin-left: 40upx;
			font-size: 40upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 24upx;
			color: #FFFFFF;
			opacity: 1;

		}

		.bgdname {
			margin-top: 30upx;
			margin-left: 40upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.4;
		}
	}

	.tableform {
		position: relative;
		width: 80%;
		margin: 0 auto;
		padding-top: 40upx;
		left: 0;
		right: 0;

		.inputs {
			top: 40upx;
			// background-color: #5AC725;
		}
	}

	.btn {
		width: 90%;
		margin: 0 auto;
		left: 0;
		right: 0;
		margin-top: 80upx;
		background-color: #FC6758;
		border-radius: 999rem;
		color: #FFFFFF;

	}

	.searchtop {
		position: fixed;
		width: 100%;
		height: 100upx;
		// background-color: #007AFF;
	}

	.searchbottom {
		position: absolute;
		bottom: 0;
		height: calc(60vh - 100upx);
		touch-action: none;

		.searchbottomview {
			display: flex;
			height: 100upx;
			border-top: 1upx solid rgba(0, 0, 0, 0.1);
			// background-color: #4CD964;
			align-items: center;

			.searchbottomleft {
				margin-left: 40upx;
			}

			.searchbottomright {
				margin-left: 80upx;
			}
		}

	}
</style>
